<template>
  <div>
    <el-form-item label="内容">
      <el-input type="textarea" autosize placeholder="请输入提示内容" v-model="localData.content" />
    </el-form-item>
    <el-form-item label="文本大小">
      <el-input-number :min="1" v-model="localData.fontSize" controls-position="right" />
    </el-form-item>
    <el-form-item label="文本颜色">
      <el-color-picker v-model="localData.color" />
    </el-form-item>
    <el-form-item label="文本背景">
      <el-color-picker v-model="localData.backgroundColor" />
    </el-form-item>
    <el-form-item label="文本样式">
      <el-checkbox v-model="localData.bold" label="粗体"></el-checkbox>
      <el-checkbox v-model="localData.italic" label="斜体"></el-checkbox>
      <el-checkbox v-model="localData.underline" label="下划线"></el-checkbox>
    </el-form-item>
    <el-form-item label="对齐方式">
      <el-select v-model="localData.align">
        <el-option label="左对齐" value="left" />
        <el-option label="居中对齐" value="center" />
        <el-option label="右对齐" value="right" />
      </el-select>
    </el-form-item>
    <el-form-item label="文本省略">
      <el-switch v-model="localData.ellipsis" />
    </el-form-item>
    <el-form-item label="悬浮显示">
      <el-switch v-model="localData.shwoTooltip" />
    </el-form-item>
    <el-form-item label="悬浮主题" v-if="localData.shwoTooltip">
      <el-select v-model="localData.tooltipEffect" clearable>
        <el-option label="深色" value="dark" />
        <el-option label="浅色" value="light" />
      </el-select>
    </el-form-item>
    <el-form-item label="悬浮位置" v-if="localData.shwoTooltip">
      <el-select v-model="localData.tooltipPosition" clearable>
        <el-option v-for="opt in positionOptions" :key="opt.value" :label="opt.label" :value="opt.value" />
      </el-select>
    </el-form-item>
    <el-form-item label="标签模式">
      <el-switch v-model="localData.isTag" />
    </el-form-item>
    <el-form-item label="标签主题" v-if="localData.isTag">
      <el-radio-group v-model="localData.effect">
        <el-radio-button label="深色" value="dark" />
        <el-radio-button label="浅色" value="light" />
        <el-radio-button label="透明" value="plain" />
      </el-radio-group>
    </el-form-item>
    <el-form-item label="启用字典映射">
      <el-switch v-model="localData.useDict" />
    </el-form-item>
    <el-form-item label="对应字典组件" v-if="localData.useDict">
      <el-select v-model="localData.useDictComp" placeholder="请选择" clearable filterable>
        <el-option v-for="field in fieldWithDicts" :label="field.fieldName" :value="field.uuid" :key="field.uuid" />
      </el-select>
    </el-form-item>
    <el-form-item label="颜色配置" v-if="localData.useDict && localData.isTag">
      <text-edit-button @click="handleEditColor" />
    </el-form-item>
    <el-form-item label="自定义函数值">
      <el-switch v-model="localData.showFuncValue" />
    </el-form-item>
    <el-form-item label="自定义函数" v-if="localData.showFuncValue">
      <el-input type="textarea" v-model="localData.valueFunction" placeholder="请输入函数定义" />
    </el-form-item>
    <el-form-item label="自定义样式">
      <el-input type="textarea" v-model="localData.customCssObj" placeholder="请输入css属性的键值对，多个键值对换行输入" />
    </el-form-item>

    <drag-dialog v-model="visible" title="颜色配置">
      <text-add-button @click="handleAddColor" />
      <el-table :data="curEditColors" border>
        <el-table-column label="文本值" prop="value">
          <template #default="scope">
            <el-input v-model="scope.row.value" placeholder="请输入文本值" />
          </template>
        </el-table-column>
        <el-table-column label="颜色" prop="type">
          <template #default="scope">
            <el-select v-model="scope.row.type">
              <el-option label="默认" value="primary" />
              <el-option label="成功" value="success" />
              <el-option label="提示" value="info" />
              <el-option label="警告" value="warning" />
              <el-option label="危险" value="danger" />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100">
          <template #default="scope">
            <text-delete-button @click="handleDelColor(scope.$index)" />
          </template>
        </el-table-column>
      </el-table>
      <template #footer>
        <dialog-footer @ok="submit" @cancel="cancel" />
      </template>
    </drag-dialog>
  </div>
</template>

<script>
import { cloneDeep } from 'lodash-es';
import { findCompByType } from '@code/components/anvil-code-low-common/utils/common-methods';
export default {
  name: 'ParagraphConfig',
  props: {
    data: {
      type: Object,
      default: () => {}
    },
    formJson: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      localData: {},
      visible: false,
      curEditColors: [],
      positionOptions: [
        {
          label: '上方',
          value: 'top'
        },
        {
          label: '上左',
          value: 'top-start'
        },
        {
          label: '上右',
          value: 'top-end'
        },
        {
          label: '下方',
          value: 'bottom'
        },
        {
          label: '下左',
          value: 'bottom-start'
        },
        {
          label: '下右',
          value: 'bottom-end'
        },
        {
          label: '左方',
          value: 'left'
        },
        {
          label: '左上',
          value: 'left-start'
        },
        {
          label: '左下',
          value: 'left-end'
        },
        {
          label: '右方',
          value: 'right'
        },
        {
          label: '右上',
          value: 'right-start'
        },
        {
          label: '右下',
          value: 'right-end'
        }
      ]
    };
  },
  computed: {
    // 筛选出字典组件
    fieldWithDicts() {
      if (this.formJson) {
        const { column } = this.formJson;
        const dictCompList = ['select', 'checkbox', 'radio'];
        const res = [];

        dictCompList.map((type) => {
          findCompByType(res, type, column);
        });
        // res.push(...column.filter((col) => dictCompList.indexOf(col.type) > -1));
        // column.map((col) => {
        //   const { type } = col;
        //   if (type == 'group' || type == 'anvilDynamic') {
        //     res.push(...col.children.column.filter((c) => dictCompList.indexOf(c.type) > -1));
        //   }
        // });
        return res;
      } else {
        return [];
      }
    }
  },
  watch: {
    data: {
      handler(newVal) {
        if (newVal) {
          this.localData = newVal;
        }
      },
      deep: true,
      immediate: true
    },
    localData: {
      handler(newVal) {
        this.$emit('update:data', newVal);
      },
      deep: true
    },
    formJson: {
      deep: true
    }
  },
  methods: {
    handleEditColor() {
      if (!this.localData.dictColors) {
        this.localData.dictColors = [];
      }
      this.curEditColors = cloneDeep(this.localData.dictColors);
      this.visible = true;
    },
    handleAddColor() {
      this.curEditColors.push({ value: '', type: '' });
    },
    handleDelColor(index) {
      this.curEditColors.splice(index, 1);
    },
    submit() {
      this.localData.dictColors = this.curEditColors;
      this.visible = false;
    },
    cancel() {
      this.visible = false;
    }
  }
};
</script>

<style scoped></style>
